import React,{Component} from  'react'
import {Modal,Input} from 'antd'
import PropTypes from 'prop-types'
class ShowModal extends Component{
    static propTypes = {
        updateName: PropTypes.func.isRequired
    }

    constructor(props){
        super(props);
        this.state={
            visible:false,
            id:0,
            name:''
        }
    }
    showModal = (id,name) => {
        this.setState({
            visible: true,
            id,
            name
        });
    }
    handleOk(e){
        this.setState({
            visible: false,
        });
        if(this.props.updateName){
            this.props.updateName(this.state.id ,this.state.name)
        }
    }

    onChange(e){
        this.setState({
            name: e.target.value,
        });
    }
    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }
    render(){
        return (
            <div>
                <Modal destroyOnClose
                    title="修改名字"
                    visible={this.state.visible}
                    onOk={this.handleOk.bind(this)}
                    onCancel={this.handleCancel}
                >
                    <p>请输入新的品类名称</p>
                    <Input onChange={this.onChange.bind(this)} defaultValue={this.state.name} placeholder="请输入新的品类名称" />

                </Modal>
            </div>
        )
    }
}

export default ShowModal






